import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Space, Table, Button, Switch, Tooltip, Input } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { AreaChartOutlined } from '@ant-design/icons';
import Delservice from '@/pages/components/delservice';
const { Search } = Input;

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

function secoundhouse(props: any) {
  console.log(props);
  
  useEffect(() => {
    props.hireList.length ? '' : props.dispatch({ type: 'area/gethirelist' });
  }, []);
  const columns: ColumnsType<DataType> = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '小区名称',
      dataIndex: 'estate_name',
      key: 'estate_name',
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      render: (item, info: any) => {
        const img = info.rec_position ? (
          <img src="http://fangadmin.shbwyz.com/static/images/rec.png" alt="" />
        ) : (
          ''
        );
        return (
          <React.Fragment>
            {item}
            {info.img ? (
              <Tooltip
                placement="right"
                title={
                  <img
                    style={{ width: '100%', height: '100%' }}
                    src={`http://fangadmin.shbwyz.com${info.img}`}
                    alt=""
                  />
                }
              >
                <AreaChartOutlined style={{ margin: '0 6px' }} />
              </Tooltip>
            ) : (
              ''
            )}

            {img}
          </React.Fragment>
        );
      },
    },
    {
      title: '面积',
      dataIndex: 'acreage',
      key: 'acreage',
      render: (item: any) => {
        return item + 'm²';
      },
    },
    {
      title: '总价',
      key: 'price',
      dataIndex: 'price',
      render: (item: any) => {
        return item + '万';
      },
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      render: (item: any) => {
        return (
          <Switch
            checkedChildren="正常"
            unCheckedChildren="待审"
            defaultChecked={item === 1 ? true : false}
          />
        );
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => {
        return (
          <>
            <Space>
              <Button
                size="small"
                style={{ background: '#009688', color: '#fff' }}
                onClick={() =>
                  props.history.push('/index/secound/edithire', { ...record })
                }
              >
                编辑
              </Button>

              <Button
                size="small"
                style={{ background: '#FF5722', color: '#fff' }}
                onClick={() => delhouse(record)}
              >
                删除
              </Button>
            </Space>
          </>
        );
      },
    },
  ];
  const [delopen, setDelopen] = useState(false);
  const [name, setName] = useState('');
  const [type, setType] = useState('');
  const [id, setId] = useState('');
  const closedel = (item: any) => {
    if (item) {
      props.dispatch({ type: 'area/delhire', payload: item });
    }
    setDelopen(false);
  };
  const delhouse = (item: any) => {
    setDelopen(true);
    setName(item.title);
    setType('二手房');
    setId(item.id);
    // console.log(item);
  };
  const onSearch = (value: any) => {
    props.dispatch({ type: 'area/searchhire', payload: value });
  };
  return (
    <div>
      <header>
        <div className="h-text">搜索信息</div>
        <Search
          placeholder="输入关键词搜索"
          allowClear
          enterButton="搜索"
          size="large"
          maxLength={200}
          style={{ width: 520 }}
          onSearch={onSearch}
        />
      </header>
      <Table
        rowSelection={{ type: 'checkbox' }}
        columns={columns}
        dataSource={props.hireList}
      />
      <Delservice
        open={delopen}
        close={closedel}
        name={name}
        type={type}
        id={id}
      ></Delservice>
    </div>
  );
}

const mapStateToProps = (state: any) => {
  const { hireList } = state.area;
  return {
    hireList,
  };
};


export default connect(mapStateToProps)(secoundhouse);
